<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>出库申请登记</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="../../../../static/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="../../../../static/css/style.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/productionPlanRegistrationCss.css">
</head>
<body style="background-color: white">
<div style="height: 5px"></div>
<div style="display: flex;justify-content: end">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加产品<span
            class="btn-icon-end"><i class="bi bi-plus-circle"></i></span>
    </button>
</div>
<div class="d1">
    <div style="margin-top: 10px"><h2>出库申请单</h2>

    </div>
    <div class="container-fluid row">
        <div class="input-group mb-4 col">
            <div class="input-group-prepend">
                <span class="input-group-text">出库人:</span>
            </div>
            <input type="text" class="form-control" id="storer" placeholder="">
        </div>
        <div class="input-group mb-4 col">
            <div class="input-group-prepend">
                <span class="input-group-text">出库理由:</span>
            </div>
            <select class="default-select  form-control wide" id="reason">
                <option>生产领料</option>
                <option>赠送</option>
                <option>内部借领</option>
                <option>其他借领</option>
            </select>
        </div>
    </div>

    <div class="container-fluid row">
        <table class="table table-bordered" style="text-align: center">
            <thead>
            <tr>
                <th style="font-weight: bold">序号</th>
                <th style="font-weight: bold">产品名称</th>
                <th style="font-weight: bold">产品编号</th>
                <th style="font-weight: bold">描述</th>
                <th style="font-weight: bold">数量</th>
                <th style="font-weight: bold">单位</th>
                <th style="font-weight: bold">成本单价(￥)</th>
                <th style="font-weight: bold">小计(￥)</th>
                <th style="font-weight: bold"></th>
            </tr>
            </thead>
            <tbody id="tbody">


            </tbody>
        </table>
    </div>

    <div class="container-fluid row" style="margin-top: 50px">
        <div class="input-group mb-4 col">
            <div class="input-group-prepend">
                <span class="input-group-text">总件数:</span>
            </div>
            <input type="text" class="form-control" id="total" readonly>
        </div>
        <div class="input-group mb-4 col">
            <div class="input-group-prepend">
                <span class="input-group-text">总金额:</span>
            </div>
            <input type="text" class="form-control" id="sum" readonly>
        </div>
    </div>

    <div class="container-fluid row">
        <div class="input-group mb-4 col">
            <div class="input-group-prepend">
                <span class="input-group-text">登记人:</span>
            </div>
            <input type="text" class="form-control" id="currentAdmin" readonly>
        </div>
        <div class="input-group mb-4 col">
            <div class="input-group-prepend">
                <span class="input-group-text">登记时间:</span>
            </div>
            <input type="text" class="form-control" id="registerTime">
        </div>
    </div>


    <div class="col" style="margin-bottom: 10px">
        <span><h6>备注:</h6></span>
        <textarea class="form-control" rows="4" id="comment"
                  style="height: 115px;border-color: #c7c7c7;resize:none"></textarea>
    </div>
    <div class="col" style="margin-bottom: 10px">
        <span><h6>出库详细理由:</h6></span>
        <textarea class="form-control" rows="4" id="reasonexact"
                  style="height: 115px;border-color: #c7c7c7;resize:none"></textarea>
    </div>
</div>
<div style="display: flex;justify-content: end">
    <div id="previewDiv">
        <button type="button" class="btn btn-info" id="preview">预览 <span class="btn-icon-end"><i
                class="bi bi-eye"></i></span>
        </button>
    </div>
    <div id="successDiv" style="display: flex;flex-direction: row">
        <div style="width: 10px" ></div>
        <button type="button" class="btn btn-success" id="submitButton">提交 <span
                class="btn-icon-end"><i
                class="fa fa-check"></i></span>
        </button>
        <div style="width: 10px"></div>
        <button type="button" class="btn btn-dark" id="cancelPreview">关闭 <span
                class="btn-icon-end"><i class="bi bi-reply"></i></span>
        </button>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg" style="display: flex">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="card-title">Add Product</h4>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="table-responsive">
                    <div id="example3_wrapper" class="dataTables_wrapper no-footer">
                        <table id="example3" class="display dataTable no-footer"
                               style="min-width: 845px;text-align: center"
                               role="grid"
                               aria-describedby="example3_info">
                            <thead>
                            <tr role="row">
                                <th>
                                    <div class="form-check custom-checkbox mb-3 checkbox-success check-lg"><input
                                            id="selectAllProducts" type="checkbox" class="form-check-input"></div>
                                </th>
                                <th>
                                    产品编号
                                </th>
                                <th>
                                    产品名称
                                </th>
                                <th>
                                    用途类型
                                </th>
                                <th>
                                    单位
                                </th>
                                <th>
                                    成本单价
                                </th>
                            </tr>
                            </thead>
                            <tbody id="tbodyCommodity">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal" id="addProductOk">制定</button>
                <button type="button" class="btn btn-dark" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>

<!-- Datatable -->
<script src="../js/jquery.dataTables.min.js"></script>
<script src="js/warehouse_registration.js"></script>


</body>
</html>